Hi 大家我是草頭黃小姐，過去的 11 天都在 JS Bin 裡面寫，然後跑出的結果也只適用控制台 console 看到，但在今天我們就要來聊聊 JS 和前端畫面的關係。

DOM

DOM 的全名為 Document Object Model，中文稱為文件物件模型。
登愣，再次發生中文單獨看都看得懂，但組成一句話，我卻不懂其意，我們用白話一點的說法即是：怎麼用 JS 來操作畫面上的 HTML 元素。

在真正進入寫 code 之前，我們來看看有哪些語法可以來操作 HTML 上的元素

getElementById()
getElementByClassName()
getElementByName()

那不妨來寫一小段 code 看看：
因為要操作 HTML 元素，所以我們先寫個 HTML 吧！

<div class="cat" id="animal-1">貓咪一號</div>
<div class="cat" id="animal-2">貓咪二號</div>

接著我想用 JavaScript 去操作 HTML，想抓貓咪一號的話，我們就到 JＳ 欄去寫，先宣告 ai 裡面要放的是 animal-1 這個值：

var a1 = document.getElementById('animal-1')

這樣我們就抓到 HTML 的 ID 了，但我們想對它做什麼事情呢？
我們接著就寫：

a1.innerHTML = "狗";

innerHTML 只得是我剛剛抓到 ID 後的 HTML 的內容，我們希望把它改成狗
我們實際看一下網頁會出現的樣子吧！
這是還沒寫上 JS 的樣子：

那加上 JS 後：